<template>
  <div class="registration-container">
    <ul class="top-wrap">
      <li class="item-wrap">
        <div class="item-label">手机号</div>
        <div class="item-content">{{ user_mobile }}</div>
      </li>
      <li class="item-wrap">
        <div class="item-label">邮箱</div>
        <div class="item-content">{{ user_email }}</div>
        <div>
          <el-button style="padding-top: 0;" type="text" @click="dialogFormVisible = true">
            <span v-if="user_email">更换邮箱</span>
            <span v-if="!user_email">绑定</span>
          </el-button>
        </div>
      </li>
      <li class="item-wrap">
        <div class="item-label">密码</div>
        <div class="item-content">*************</div>
        <div>
          <el-button style="padding-top: 0;" type="text" @click="dialogFormVisiblePassword = true">修改密码</el-button>
        </div>
      </li>
    </ul>
    <!--绑定邮箱-->

    <div>
      <el-dialog :visible.sync="dialogFormVisible" title="绑定邮箱">
        <el-form :model="form" label-width="100px">
          <el-form-item :label-width="formLabelWidth" label="邮箱">
            <el-input v-model="form.email" auto-complete="on"/>
            <span class="send-code" @click="sendBindEmail()">发送验证码</span>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="邮箱验证码">
            <el-input v-model="form.code" auto-complete="off"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveBindEmail()">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!--修改密码-->
    <div>
      <el-dialog :visible.sync="dialogFormVisiblePassword" title="修改密码">
        <el-form ref="PasswordForm" :rules="passwordRules" :model="form">
          <el-form-item :label-width="formLabelWidth" label="旧密码">
            <el-input v-model="passwordform.oldpassword" auto-complete="off" type="password"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="新密码">
            <el-input v-model="passwordform.password" auto-complete="off" type="password"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="确认密码">
            <el-input v-model="passwordform.repassword" auto-complete="off" type="password"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisiblePassword = false">取 消</el-button>
          <el-button type="primary" @click="EditPasswordInfo()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-button type="danger" style="width: 240px;" class="logout" @click="logout">退出账号</el-button>
  </div>
</template>
<script>
import { getUserInfo, EditPassword, bindingEmail, logout } from '@/api/login'
import { sendEmail, sendSms } from '@/api/message'
import { isvalidEmail, IsValidatCode, IsEquallyPassword } from '@/utils/validate'
import md5 from 'md5'

export default {
  data() {
    const validatePass = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error('密码不能小于3位'))
      } else {
        callback()
      }
    }
    return {
      user_mobile: '',
      user_email: '',
      password: '',
      dialogFormVisible: false,
      dialogFormVisiblePassword: false,
      form: {
        email: '',
        code: ''
      },
      passwordRules: {
        password: [{ required: true, trigger: 'blur', validator: validatePass }]
      },
      passwordform: {
        oldpassword: '',
        password: '',
        repassword: ''
      },
      formLabelWidth: '120px'
    }
  },
  created() {
    this.getServiceInfo()
  },
  methods: {
    // 获取服务商的信息
    getServiceInfo() {
      getUserInfo().then(response => {
        if (response.status === 200) {
          this.user_mobile = response.data.user_mobile
          this.user_email = response.data.user_email
        }
      })
    },
    // 绑定的邮箱发送验证码
    sendBindEmail() {
      if (isvalidEmail(this.form.email)) {
        sendEmail(this.form.email, 2).then(response => {
          if (response.status === 200) {
            this.$message({
              type: 'success',
              message: '发送邮件成功'
            })
          } else {
            this.$message({
              type: 'error',
              message: response.msg
            })
          }
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请输入正确邮箱账号'
        })
      }
    },
    // 保存绑定的邮箱
    saveBindEmail() {
      if (IsValidatCode(this.form.code)) {
        bindingEmail(this.form.email, this.form.code).then(response => {
          if (response.status === 200) {
            this.$message({
              type: 'success',
              message: '绑定邮箱成功'
            })
            this.dialogFormVisible = false
            this.getServiceInfo()
          } else {
            this.$message({
              type: 'error',
              message: response.msg
            })
          }
        })
      }
    },
    // 修改密码
    EditPasswordInfo() {
      this.$refs.PasswordForm.validate(valid => {
        if (valid) {
          if (IsEquallyPassword(this.passwordform.password, this.passwordform.repassword)) {
            const oldpassword = md5(this.passwordform.oldpassword)
            const password = md5(this.passwordform.password)
            const repassword = md5(this.passwordform.repassword)
            EditPassword(oldpassword, password, repassword).then(response => {
              if (response.status === 200) {
                this.dialogFormVisiblePassword = false
                this.$message({
                  type: 'success',
                  message: '重置密码成功,退出重新登录'
                })
                setTimeout(this.logout, 1000)
              } else {
                this.$message({
                  type: 'danger',
                  message: response.msg
                })
              }
            })
          } else {
            this.$message({
              type: 'error',
              message: '两次输入密码不一样'
            })
          }
        }
      })
    },

    // 退出账号
    logout() {
      this.$store.dispatch('FedLogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    }
  }
}
</script>

<style rel="stylesheet" lang="scss">
  $blue: #2390FF;
  .registration-container {
    .el-dialog__header {
      border-bottom: 1px solid #e9e9e9;
      padding: 20px ;
    }
    .el-dialog__footer  {
      border-top: 1px solid #e9e9e9;
      padding: 20px ;
    }
    .el-dialog__body {
      padding: 50px 120px 50px 60px;
    }
  }
</style>
<style rel="stylesheet" lang="scss" scoped>
  $blue: #2390FF;
  .send-code {
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 14px;
    color: $blue;
    cursor: pointer;
    user-select: none;
  }
  .registration-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .item-wrap {
    display: flex;
    padding-top: 25px;
  }
  .item-label {
    width: 140px;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    color: rgba(102, 102, 102, 1);
    line-height: 21px;
  }
  .item-content {
    width: 300px;
    height: 40px;
    vertical-align: middle;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    color: rgba(51, 51, 51, 1);
    line-height: 21px;
  }
  .top-wrap {
    width: 500px;
    padding: 60px 0;
  }
</style>
